import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom';
import Detail from './detail';
export default class Message extends Component {
  state = {
    messageList: [
      {
        id: "0",
        title: "消息1"
      },
      {
        id: "1",
        title: "消息2"
      },
      {
        id: "2",
        title: "消息3"
      }
    ]
  }
  pushShow=(e)=>{
    // params参数
    // this.props.history.push(`/home/message/detail/${e.id}/${e.title}`)
    //query参数
    // this.props.history.push(`/home/message/detail?id=${e.id}&title=${e.title}`)
    //state参数
    this.props.history.push(`/home/message/detail`,{id:e.id,title:e.title})
  }
  replaceShow=(e)=>{
    //不会保留history记录
    // this.props.history.replace(`/home/message/detail/${e.id}/${e.title}`)
     //query参数
    //  this.props.history.replace(`/home/message/detail?id=${e.id}&title=${e.title}`)
    //staet 参数
    this.props.history.replace(`/home/message/detail`,{id:e.id,title:e.title})
  }
  back=()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()
  }
  go=()=>{
    this.props.history.go(-1)
  }
  render() {
    const { messageList } = this.state
    return (
      <div>
        {
          messageList.map(e => {
            return <div key={e.id}>
              {/* 携带params参数 */}
              {/* <Link to={`/home/message/detail/${e.id}/${e.title}`}>{e.title}</Link> */}
              {/* search参数 */}
              {/* <Link to={`/home/message/detail?id=${e.id}&title=${e.title}`}>{e.title}</Link> */}
              
              {/* 默认是push跳转 replace不会留下回退记录 */}
              <Link to={{pathname:"/home/message/detail",state:{id:e.id,title:e.title}}}>{e.title}</Link>
              &nbsp;<button onClick={()=>this.pushShow({id:e.id,title:e.title})}>push查看</button>
              &nbsp;<button onClick={()=>this.replaceShow({id:e.id,title:e.title})}>replace查看</button>
            </div>
          })
        }
        {/* 声明参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
        {/* 无需声明 */}
        <Route path="/home/message/detail" component={Detail} />
        <br/>
        <button onClick={this.back}>回退</button>
        <button onClick={this.forward}>前进</button>
        <button onClick={this.go}>前进</button>
      </div>
    )
  }
}
